<template>
  <div class="team-setting-page">
    <!-- 搜索区域 -->
    <el-form :model="searchForm" inline class="search-form">
      <el-form-item label="班组类型">
        <el-select v-model="searchForm.teamType" placeholder="请选择班组类型">
          <el-option v-for="type in teamTypes" :key="type" :label="type" :value="type" />
        </el-select>
      </el-form-item>
      <el-form-item label="班组编号">
        <el-input v-model="searchForm.teamId" placeholder="请输入班组编号" />
      </el-form-item>
      <el-form-item label="班组名称">
        <el-input v-model="searchForm.teamName" placeholder="请输入班组名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <div class="operation-btns">
      <el-button type="primary" @click="handleAdd">新增</el-button>
      <!-- 关键：isSingleSelected为true时启用按钮，否则禁用 -->
      <el-button type="success" @click="handleEdit" :disabled="!isSingleSelected">修改</el-button>
    </div>

    <!-- 数据表格 -->
    <!-- 数据表格：新增 @selection-change 事件 -->
    <el-table :data="page.records" border style="width: 100%" :header-cell-style="{ background: '#f8f9fa' }"
      @selection-change="handleSelectionChange"><!-- 监听选中项变化 -->

      <el-table-column type="selection" width="55" />
      <el-table-column prop="teamId" label="班组编号" />
      <el-table-column prop="teamName" label="班组名称" />
      <el-table-column prop="teamType" label="班组类型" />
      <el-table-column prop="remarks" label="备注" />
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-button type="text" @click="handleModify(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSearch" @current-change="handleSearch" v-model:current-page="page.current"
      :page-sizes="[10, 20, 30, 40]" v-model:page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
      :total="page.total" class="pagination" />
  </div>


  <!-- 新增/编辑班组弹窗 -->
  <el-dialog v-model="dialogVisible" :title="isEdit ? '修改班组' : '添加班组'" width="50%">
    <el-form :model="dialogForm" ref="dialogFormRef" label-width="80px">
      <el-form-item label="班组编号" prop="teamId">
        <el-input v-model="dialogForm.teamId" placeholder="请输入班组编号" />
        <el-switch v-model="autoGenerate" active-text="自动生成" inactive-text="手动输入" @change="handleAutoGenerate" />
      </el-form-item>
      <el-form-item label="班组名称" prop="teamName" required>
        <el-input v-model="dialogForm.teamName" placeholder="请输入班组名称" />
      </el-form-item>
      <el-form-item label="班组类型" prop="teamType" required>
        <el-select v-model="dialogForm.teamType" placeholder="请选择班组类型">
          <el-option v-for="type in teamTypes" :key="type" :label="type" :value="type" />
        </el-select>
      </el-form-item>
      <el-form-item label="备注" prop="remarks">
        <el-input type="textarea" v-model="dialogForm.remarks" placeholder="请输入内容" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDialogConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import request from '@/api/request'
import { ref, reactive, computed } from 'vue' // 新增computed和reactive（dialogForm用了reactive）
import { ElLoading, ElMessage } from 'element-plus' // 新增ElMessage（提示用）
// 1. 补充isEdit变量声明：控制"新增/修改"状态，默认false（新增）
const isEdit = ref(false)
// 表格选中项（存储勾选的行数据）
const selectedRows = ref([]);
// 模拟班组类型选项
const teamTypes = ref(['机加工', '组装', '注塑'])
// 搜索表单数据
const searchForm = ref({
  teamType: '',
  teamId: '',
  teamName: ''
})
// 分页相关数据
// const tableData = ref([]);
// const total = ref(82);
// const size = ref(10);
// const current = ref(1);
const page = ref({
  current: 1,
  size: 10,
  total: 0
})
// 弹窗显示控制
const dialogVisible = ref(false)
const dialogFormRef = ref(null);
//弹窗表单数据
const dialogForm = reactive({
  teamId: '',
  teamName: '',
  teamType: '',
  remarks: ''
});
//控制班组编号是否自动生成
const autoGenerate = ref(false);
// 搜索事件
const handleSearch = () => {
  console.log('搜索条件：', page)
  // 这里可调用接口，根据 searchForm 筛选表格数据，更新 tableData
  // 显示加载状态
  const loading = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });

  // 调用接口，传递搜索条件和分页参数
  request({
    url: "/team-info/list",
    method: 'get',
    params: {
      // 搜索条件
      teamType: searchForm.value.teamType,
      teamId: searchForm.value.teamId,
      teamName: searchForm.value.teamName,
      // 分页参数
      current: page.value.current,
      size: page.value.size
    }
  }).then(res => {
    console.log('搜索结果：', res)
    // 假设后端返回格式为 { data: [], total: 0 }
    // tableData.value = res.data || [];
    page.value = res.data || {}
  }).catch(error => {
    console.error('搜索失败', error);
    ElMessage.error('搜索失败，请重试');
  }).finally(() => {
    // 关闭加载状态
    loading.close();
  });
}
handleSearch()
// 重置事件
const handleReset = () => {
  searchForm.value = {
    teamType: '',
    teamId: '',
    teamName: ''
  }
  handleSearch();
}
// 监听表格选中项变化：更新selectedRows，并控制修改按钮禁用状态
const handleSelectionChange = (val) => {
  selectedRows.value = val; // val 是当前勾选的所有行数据组成的数组
};

// 计算属性：判断是否“仅选中一行”（用于控制按钮禁用状态）
const isSingleSelected = computed(() => {
  return selectedRows.value.length === 1; // 只有选中1行时返回true，否则false
});
// 新增事件
const handleAdd = () => {
  // 可打开新增弹窗，进行班组信息新增操作
  // 重置弹窗表单
  dialogForm.teamId = '';
  dialogForm.teamName = '';
  dialogForm.teamType = '';
  dialogForm.remarks = '';
  autoGenerate.value = false;
  // 关键：设置为新增状态
  isEdit.value = false;
  dialogVisible.value = true;
}
// 处理班组编号自动生成切换
const handleAutoGenerate = (val) => {
  if (val) {
    // 这里可以调用接口生成班组编号，示例中暂时用固定值演示
    dialogForm.teamId = 'TR' + new Date().getTime();
  } else {
    dialogForm.teamId = '';
  }
};

// 弹窗确定按钮事件
const handleDialogConfirm = () => {
  dialogFormRef.value.validate((valid) => {
    if (valid) {
      const requestConfig = {
        // 关键：访问isEdit时加.value，区分新增（post）和修改（put
        method: isEdit.value ? 'put' : 'post',
        url: isEdit.value ? '/team-info/update' : '/team-info/add',
        data: dialogForm
      }
      request(requestConfig).then(res => {
        
        dialogVisible.value = false
        ElMessage.success(res.message || (isEdit.value ? '修改成功' : '新增成功'))
        handleSearch()//重新加载表格数据
      }).catch(error => {
        ElMessage.error('网络错误，操作失败')
        console.error(error)
      })
    }
  })
}
// 修改事件（批量/单条逻辑可扩展）
// const handleEdit = () => {
//   console.log('点击修改')
// 获取选中行数据，进行编辑操作
// }
// 批量修改按钮事件（仅选中1行时触发）
const handleEdit = () => {
  // 1. 兜底校验：确保仅选中1行
  if (selectedRows.value.length !== 1) {
    ElMessage.warning('请选择一条数据进行修改');
    return;
  }

  // 2. 回显选中行数据到弹窗
  const selectedRow = selectedRows.value[0];
  dialogForm.teamId = selectedRow.teamId || ''; // 避免null/undefined
  dialogForm.teamName = selectedRow.teamName || '';
  dialogForm.teamType = selectedRow.teamType || '';
  dialogForm.remarks = selectedRow.remarks || '';

  // 3. 控制弹窗状态（关闭自动生成+标记修改+显示弹窗）
  autoGenerate.value = false; // 修改时不允许自动生成编号
  isEdit.value = true; // 弹窗标题变为“修改班组”
  dialogVisible.value = true; // 关键：显示弹窗
};

// 行内修改事件
const handleModify = (row) => {
  console.log('行内修改，当前行数据：', row)
  // 打开编辑弹窗，回显 row 数据进行修改
  dialogForm.teamId = row.teamId;
  dialogForm.teamName = row.teamName;
  dialogForm.teamType = row.teamType;
  dialogForm.remarks = row.remarks;
  // 若有自动生成班组编号的逻辑，这里关闭自动生成（根据实际需求调整）
  autoGenerate.value = false;
  // 关键：设置为修改状态
  isEdit.value = true;
  dialogVisible.value = true;
}

</script>

<style scoped>
.team-setting-page {
  padding: 20px;
}

.search-form {
  margin-bottom: 16px;
}

.operation-btns {
  margin-bottom: 16px;
}

.pagination {
  margin-top: 16px;
  text-align: right;
}

:deep(.el-select) {
  width: 200px !important;
  /* 关键：统一下拉框输入区域宽度 */
}

/* 2. 让下拉框弹出框（选项面板）宽度与输入框部分一致 */
:deep(.el-select-dropdown) {
  width: 200px !important;
  /* 与上面的 el-select 宽度保持一致 */
  min-width: auto !important;
  /* 清除默认最小宽度，避免溢出 */
}
</style>